<template>
    <div class="header">
        <input type="checkbox" v-model="isChecked">
        <div>
            <span>已完成</span><span>{{ count }}</span>/
            <span>全部</span><span>{{ todos.length }}</span>
        </div>
        <button @click="clearAllCompleteTodos">清除已完成任务</button>
    </div>
</template>
<script lang='ts'>
import { ToDo } from '@/types/todos'
import { computed, defineComponent } from 'vue'
export default defineComponent({
    name: 'MyFooter',
    props: {
        todos: {
            type: Array as () => ToDo[],
            required: true
        },
        checkAll: {
            type: Function,
            required: true
        },
        clearAllCompleteTodos: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        // 全选或全不选的 这个是只读取的
        const count = computed(() => {
            return props.todos.reduce((pre, todo, index) => pre + (todo.isCompleted ? 1 : 0), 0)
        })
        // 全选或全不选的计算属性 这个不仅要读取还要可以进行设置
        const isChecked = computed({
            get() {
                return count.value > 0 && props.todos.length === count.value
            },
            set(val) {
                props.checkAll(val)
            }
        })
        return {
            count,
            isChecked
        }
    }
})
</script>
<style scoped lang="scss">
.header {
    width: 80%;
    background-color: aqua;
    height: 40px;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>
